<template>
      <ul class="goods-list">
          <GoodsItem v-for="item in showGoodsData" :key="item.id" :item="item" />
        
      </ul>
</template>
<script>
import {mapState} from "vuex";
import GoodsItem from "./GoodsItem.vue"
export default {
    name:"GoodsList",
    components:{
        GoodsItem
    },
    computed:{
        // goodsData(){
        //     return this.$store.state.goodsData;
        // },
        ...mapState(['goodsData','type','status']),
        showGoodsData(){
            let data=null;
            if(this.type==0){
                // return this.$store.state.goodsData;
                data=this.goodsData.map(item=>item);
            }else{
                // return  this.goodsData.filter(item=>item.type==this.type);    
                data=this.goodsData.filter(item=>item.type==this.type);
            }
            console.log(data);
            switch(this.status){
                case "all":
                    return data;
                case "sales":
                    return data.sort((a,b)=>{
                        return b.sales-a.sales
                    });
                case "priceMax":
                    return data.sort((a,b)=>b.price-a.price);
                case "priceMin":
                    return data.sort((a,b)=>a.price-b.price);

            }
            
        }
    },

}
</script>
<style lang="scss" scoped>
      
.goods-list {
    padding-top: .08rem;
    height: 5.13rem;
    overflow-y: scroll;
}

.cart-list {
    height: 5.60rem;
}
</style>